<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>

</head>
<body>
<div id="ax">
    页码：<input type="text" v-model="currentPage"><br>
    每页个数：<input type="text" v-model="pageSize"><br>
    username：<input type="text" v-model="user.username"><br>
    gender：<input type="text" v-model="user.gender"><br>
    email：<input type="text" v-model="user.email"><br>
    <button @click="newPage">查询</button>
    <ul>
        <li v-for="user in users" :key="index">
            {{user.id}}--{{user.username}}--{{user.gender}}--{{user.password}}--{{user.email}}
        </li>
    </ul>
</div>
<script>
    var vue = new Vue({
        el: "#ax",
        data: {
            currentPage: 1,
            pageSize: 5,
            users: [],
            user: {
                "username": "",
                "gender": "",
                "email": "",
            }
        },
        created() {
            axios.post("/users/" + this.currentPage + "/" + this.pageSize, this.user).then(res => {
                this.users = res.data;
            })
        },
        methods: {
            newPage() {
                axios.post("/users/" + this.currentPage + "/" + this.pageSize, this.user).then(res => {
                    this.users = res.data;
                })
            }
        }
    });


</script>
</body>
</html>






































